<template>
  <van-form @submit="onSubmit">
    <van-field
      readonly
      clickable
      name="taluserProvincial"
      :value="value"
      label="筛选省份"
      placeholder="选择所在省份"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        :loading="columnsLoading"
        value-key="provincial"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </van-form>
</template>

<script>
import { provincialList } from "@/api/common";
export default {
  data() {
    return {
      showPicker: false,
      columnsLoading: true,
      columns: [],
      value: "",
    };
  },
  mounted() {
    provincialList().then((res) => {
      this.columns = res.data;
      this.columnsLoading = false;
    });
  },
  methods: {
    //省份
    onConfirm(value) {
      this.value = value.provincial ? value.provincial : "";
      this.showPicker = false;
    },
    onSubmit() {},
  },
};
</script>

<style>
</style>